<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>新增订单</title>
<base>
<link rel="stylesheet" type="text/css"
	href="../../layui/css/layui.css" media="all">
<style type="text/css">
	body{
		margin:20px 0px;
	}
	.shuliang{
		margin:0;
		padding:0;
		border:0 none;
	}
	.beiz{
		margin:0;
		padding:0;
		border:0 none;
	}
	#goods{
		margin:0px 0px 0px 25px;
	}
	.demoTable{
		margin:0px 0px 0px 25px;
	}
</style>
</head>
<body>
	<fieldset class="layui-elem-field layui-field-title"
		style="margin-top: 20px;">
		<legend>新增订单</legend>
	</fieldset>
	<form class="layui-form" id="form">
			<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label">采购备注</label>
					<div class="layui-input-inline">
						<input type="text" name="fdPoRemark" id="fdPoRemark" required
							lay-verify="required" placeholder="采购备注" maxlength="200"
							autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-btn-group demoTable">
					<button class="layui-btn" data-type="getCheckData" id="add">一键全部添加</button>
				</div>
			</div>
	</form>
	<div class="layui-form">
		<table id="goods" class="layui-table">
		<colgroup>
	      <col width="150">
	      <col width="120">
	      <col width="150">
	      <col width="120">
	      <col width="120">
	      <col >
	    </colgroup>
	    <thead>
			<tr>
				<td>采购药品名称</td>
				<td>物品数量</td>
				<td>物品备注</td>
				<td>物品单位</td>
				<td>进价</td>
				<td>操作</td>
			</tr>
		</thead>
		</table>
		
	</div>
	<br/>
	<div class="demoTable">
	  搜索：
	  <div class="layui-inline">
	    <input class="layui-input" name="drugName" id="drugName" autocomplete="off" placeholder="输入药品关键字">
	  </div>
	  <div class="layui-inline layui-form">
			<select name="dtId" id="dtId"
				autocomplete="off" class="layui-input">
				<option></option>
			</select>
	  </div>
	  <div class="layui-inline">
	    <input class="layui-input" name="drugBarCode" id="drugBarCode" autocomplete="off" placeholder="输入药品编码">
	  </div>
	  <div class="layui-inline">
	    <input class="layui-input" name="drugPinyin" id="drugPinyin" autocomplete="off" placeholder="输入药品简称">
	  </div>
      <div class="layui-input-inline" style="width: 100px;">
        <input type="number" id="priceMin" name="priceMin" onkeyup="priceMin()" placeholder="￥" autocomplete="off" class="layui-input">
      </div>
      -
      <div class="layui-input-inline" style="width: 100px;">
        <input type="number" id="priceMax" name="priceMax" onkeyup="priceMax()"   placeholder="￥" autocomplete="off" class="layui-input">
      </div>
	  <button class="layui-btn" data-type="reload">搜索</button>
	</div>
	<table class="layui-table" id='cx' lay-filter="test"></table>
 
<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>


<script src="../../layui/layui.js"></script>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="../../res/mln/getUrlParam.js"></script>
<script>
	var arr = "";
	//全选之后的删除。删除goods表格的数据
  function show(obj){
		var oDivs= obj.parentNode.parentNode;
		obj.parentNode.parentNode.parentNode.removeChild(oDivs);
  }
 // oninput="()"
   function keyPress() {    
     var keyCode = event.keyCode;    
     if ((keyCode >= 48 && keyCode <= 57))    
    {    
         event.returnValue = true;    
     } else {    
           event.returnValue = false;    
    }    
 } 
layui.use(['laydate', 'laypage', 'layer', 'table', 'upload', 'element'], function(){
  var laydate = layui.laydate //日期
  ,laypage = layui.laypage //分页
  layer = layui.layer //弹层
  ,table = layui.table //表格
  ,upload = layui.upload //上传
  ,element = layui.element; //元素操作
 
  //监听Tab切换
  element.on('tab(demo)', function(data){
    layer.msg('切换了：'+ this.innerHTML);
    console.log(data);
  });
  //执行一个 table 实例
  table.render({
     elem: '#cx'
    ,url: '../../DrugModel/dindanfindAll.action' //数据接口
    ,page: true //开启分页
    ,method:'post'
    ,size:'sm'
    ,cols: [[ //表头
       {type:'checkbox',fixed: 'left'}
      ,{field: 'drugId', title: '药品ID', width:120, fixed: 'left'}
      ,{field: 'drugImg', title: '药品图片', width:120,templet:'<div><img src="{{ d.drugImg}}"></div>'}
      ,{field: 'drugBarCode', title: '药品条形码', width:120}
      ,{field: 'drugName', title: '药品名称', width:150}
      ,{field: 'drugPrice', title: '价格', width: 120}
      ,{field: 'isva', title: '是否有效', width: 120}
      ,{field: 'pov', title: '单位', width: 120}
      ,{field: 'dom', title: '研制日期', width: 120}
      ,{field: 'drugPrices', title: '建议零售价', width: 120}
      ,{field: 'drugPinyin', title: '汉语拼音简拼', width: 120}
      ,{field: 'dtName', title: '类型名称', width: 120}
      ,{field: 'speIndications', title: '适应症', width: 120}
    ]]
 	 ,id: 'testRe'
  });
 
  layui.use('table', function(){
	  var table = layui.table;
	  table.on('checkbox(test)', function(obj){
		  //alert(obj.type);
		  //得到id为goods的表格的数据
		  var oCar = document.getElementById("goods");
			//全选
		  if(obj.type=="all"){
			  //获取选中状态
			  if(obj.checked==true){
				  //alert(JSON.stringify(table));
				  //得到该表格的所有数据
				  var one=table.cache.testRe;
				  //得到id为goods的表格.得到该表格tr的值
				  var tr=oCar.getElementsByClassName("iii");
				  //得到tr的长度
				  var len = tr.length;
				  //判断当长度为0时，点击全选将数据全部加入进去
				  if(len==0){
					  //for 根据one 表格的长度循环  取数据
					  for(var i=0;i<one.length;i++){
						  //新增一个tr的节点
						  var oDiv= document.createElement("tr");
						  //设置tr的class为trs
						  oDiv.className = "trs";
						  //加入数据
						  oDiv.innerHTML +='<td style="display:none">'+one[i].drugId+'</td>'
						  oDiv.innerHTML +='<td class="iii">'+one[i].drugName+'</td>'
						  oDiv.innerHTML +='<td><input type="text" class="shuliang" style="ime-mode:disabled;" onpaste="return false;"  onkeypress="keyPress()" maxlength="4"></td>'
						  oDiv.innerHTML +='<td><input type="text" class="beiz" maxlength="200"></td>'
						  oDiv.innerHTML +='<td>'+one[i].pov+'</td>'
						  oDiv.innerHTML +='<td>'+one[i].drugPrice+'</td>'
						  oDiv.innerHTML +='<td><a href="javascript:;" onclick="show(this)">删除</a></td>'
						  //将数据加入表格中
						  oCar.appendChild(oDiv);
						  /* var delBtn = oDiv.lastChild;
							delBtn.onclick=function(){
								oCar.removeChild(oDiv);
							} */
					  }
					  //否则
				  }else{
					  //for 根据one 表格的长度循环 取数据
					  for(var i=0;i<one.length;i++){
						  //设置一个常量
						  var st="";
						  //for 循环id为goods表格的数据
						  for(j=0;j<len;j++){
							  //得到点击选中药品的名字
							  var ii=one[i].drugName;
							  //得到表格id为goods药品的名字
							  var uu=tr[j].innerHTML;
							  //判断当选中药品的名字和goods表格中药品名字为一致时
							  if(ii==uu){
								  //将变量st添加 "已有该数据"；
								  st="已有该数据";
								  //跳出循环
								  break;
							  }
						  }
						  //如果变量st等于 "已有该数据"，则提示已有该数据
						  if(st=="已有该数据"){
							 
							//否则
						  }else{
							  //新增一个tr的节点
							  var oDiv = document.createElement("tr");
							  //设置tr的class为trs
							  oDiv.className = "trs";
							  //加入数据
							  oDiv.innerHTML +='<td style="display:none">'+data.drugId+'</td>'
							  oDiv.innerHTML +='<td class="iii">'+one[i].drugName+'</td>'
							  oDiv.innerHTML +='<td><input type="text" class="shuliang" style="ime-mode:disabled;" onpaste="return false;"  onkeypress="keyPress()" maxlength="4"></td>'
							  oDiv.innerHTML +='<td><input type="text" class="beiz" maxlength="200"></td>'
							  oDiv.innerHTML +='<td>'+one[i].pov+'</td>'
							  oDiv.innerHTML +='<td>'+one[i].drugPrice+'</td>'
							  oDiv.innerHTML +='<td><a href="javascript:;" onclick="show(this)">删除</a></td>'
							  //将数据加入表格中
							  oCar.appendChild(oDiv);
							  //得到新加节点的最后的一个a标签的
							 /* var delBtn = oDiv.lastChild.getElementsByTagName("a")[0];
							  //当点击a标签时触发该事件
								delBtn.onclick=function(){
								  //将这个节点删除
									oCar.removeChild(oDiv);
								} */
						  }
					  }
				  }
			  }
			  //单选
		  }else if(obj.type=="one"){
			  //获取选中状态
			  if(obj.checked==true){
				  //得到所在行所有键值
				  data = obj.data;
				  //alert(JSON.stringify(obj.data));
				  //得到id为goods的表格.得到该表格tr的值
				  var tr=oCar.getElementsByClassName("iii");
				  //得到tr的长度
				  var len = tr.length;
				  //判断当长度为0时，点击选中将数据全部加入进去
				  if(len==0){
					  //新增一个tr的节点
					  var oDiv = document.createElement("tr");
					  //设置tr的class为trs
					  oDiv.className = "trs";
					  //加入数据
					  oDiv.innerHTML +='<td style="display:none">'+data.drugId+'</td>'
					  oDiv.innerHTML +='<td class="iii">'+data.drugName+'</td>'
					  oDiv.innerHTML +='<td><input type="text" class="shuliang" style="ime-mode:disabled;" onpaste="return false;"  onkeypress="keyPress()" maxlength="4"></td>'
					  oDiv.innerHTML +='<td><input type="text" class="beiz" maxlength="200"></td>'
					  oDiv.innerHTML +='<td>'+data.pov+'</td>'
					  oDiv.innerHTML +='<td>'+data.drugPrice+'</td>'
					  oDiv.innerHTML +='<td><a href="javascript:; " onclick="show(this)">删除</a></td>'
					  //将数据加入表格中
					  oCar.appendChild(oDiv);
					  //得到新加节点的最后的一个a标签的
					  /* var delBtn = oDiv.lastChild.getElementsByTagName("a")[0];
					    //当点击a标签时触发该事件
						delBtn.onclick=function(){
							//将这个节点删除
							oCar.removeChild(oDiv);
						} */ 
				  }else{
					  //for 循环id为goods表格的数据
					  for(i=0;i<len;i++){
						  //得到点击选中药品的名字
						  var sj=tr[i].innerHTML;
						  //得到表格id为goods药品的名字
						  var oo=data.drugName;
						  //设置一个变量
						  var st="";
						  //判断当选中药品的名字和goods表格中药品名字为一致时
						  if(sj==oo){
							  //将变量st添加 "已有该数据"；
							  st="已有该数据";
							  //跳出循环
							  break;
						  }
					  }
					  //如果变量st等于 "已有该数据"，则提示已有该数据
					  if(st=="已有该数据"){
						  layer.msg('亲，你点击的药品已经加入过了!!!', {
							  icon: 5,
							  time: 1500 //1秒关闭（如果不配置，默认是3秒）
							}, function(){
							  
						});
					  //否则
					  }else{
						  //新增一个tr的节点
						  var oDiv = document.createElement("tr");
						  //设置tr的class为trs
						  oDiv.className = "trs";
						  //加入数据
						  oDiv.innerHTML +='<td style="display:none">'+data.drugId+'</td>'
						  oDiv.innerHTML +='<td class="iii">'+data.drugName+'</td>'
						  oDiv.innerHTML +='<td><input type="text" class="shuliang" style="ime-mode:disabled;" onpaste="return false;"  onkeypress="keyPress()" maxlength="4"></td>'
						  oDiv.innerHTML +='<td><input type="text" class="beiz" maxlength="200"></td>'
						  oDiv.innerHTML +='<td>'+data.pov+'</td>'
						  oDiv.innerHTML +='<td>'+data.drugPrice+'</td>'
						  oDiv.innerHTML +='<td><a href="javascript:;" onclick="show(this)">删除</a></td>'
						  //将数据加入表格中
						  oCar.appendChild(oDiv);
						  //得到新加节点的最后的一个a标签的
						  /* var delBtn = oDiv.lastChild.getElementsByTagName("a")[0];
						  //当点击a标签时触发该事件
							delBtn.onclick=function(){
								//将这个节点删除
								oCar.removeChild(oDiv);
							} */ 
					  }
					  
				  }
				  
			  }
		  }
		  
	  });
		var $ = layui.$;
		//当点击一键添加的时候
	  $('#add').on('click', function(){
		  //得到订单表的审核备注
		  var fdPoRemark = $("#fdPoRemark").val();
		  //得到goods表格的数据
		  var number=0;
		  //设置一个数组
		  var arr = [];
		  //得到goods表格的数据
			 $("#goods tr").each(function(){
				 if(number>0){
					 var row = "";
					 var td = $(this).find("td");
					 row={"drugId":$(td[0]).text(),"fdItemNumber":$(td[2]).children().val(),"fdItemRemark":$(td[3]).children().val(),"fdUnit":$(td[4]).text(),"fdPrice":$(td[5]).text()};
					 //将数据加入进去
					 arr.push(row);
				 }
				 number=number+1;
			 });
		  	//转换json数据
			 var arrs = JSON.stringify(arr);
			 //通过ajax方式传入到后台
			 $.ajax({
                 url:"../../FdPurchase/save.action",
                 data:{"arr":arrs,"fdPoRemark":fdPoRemark},
                 type: "post",
                 dataType:"json",
                 cache:false,
                 async: false,
                 success: function(obj){
                	
                 }
              });
			//刷新页面
 			parent.location.reload();
		    /* var type = $(this).data('type');
		    active[type] ? active[type].call(this) : '';
		    if(arr == "[],"){
	            alert("请勾选需要操作的记录");
	        }else{
	        	$.ajax({
                    url:"../../FdPurchase/save.action",
                    data:{"arr":arr},
                    type: "post",
                    dataType:"json",
                    cache:false,
                    async: false,
                    success: function(obj){
                    	table.reload('testReload',{
        					page: {
        					    curr: 1 //重新从第 1 页开始
        					  }
        				});
                    }
                 });
	        } */
		});	  
	//监听单元格编辑
	  table.on('edit(demo)', function(obj){
	    var value = obj.value //得到修改后的值
	    ,data = obj.data //得到所在行所有键值
	    ,field = obj.field; //得到字段
	    var fdItemNumber;
	    var fdItemRemark;
	    //当编辑的是数量时，判断它只能是数字
	    if(field=="fdItemNumber"){
	    	var reg = new RegExp("^[0-9]*$");  
	    	if(reg.test(value)){
	    		fdItemNumber=value;
		    	fdItemRemark=data.fdItemRemark;
	    	}else {
	    		//提示只能输入数字
	    		layer.msg('输入的内容不能含有字母或文本', {
					  icon: 1,
					  time: 1000 //1秒关闭（如果不配置，默认是3秒）
					}, function(){
						table.reload('testReload',{page:{curr:1}});
				});
	    		return;
	    	}
	    	//判断是物品备注时
	    }else if(field=="fdItemRemark"){
	    	fdItemRemark=value;
	    	fdItemNumber=data.fdItemNumber;
	    }
	    var fdPodId=data.fdPodId;
	    var fdPrice=data.fdPrice;
	    //通过ajax方法传入到后台
    	$.ajax({
            url:"../../FdPoBreakdown/update.action",
            data:{"fdPodId":fdPodId,"fdPrice":fdPrice,"fdItemRemark":fdItemRemark,"fdItemNumber":fdItemNumber},
            type: "post",
            dataType:"json",
            cache:false,
            async: false,
            success: function(obj){
				//修改成功后刷新该表格
				table.reload('testReload',{
					page: {
					    curr: 1 //重新从第 1 页开始
					  }
				});
            }
         });
	  });
  });
  //根据id删除数据
  table.on('tool(demo)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
	    var data = obj.data //获得当前行数据
	    ,layEvent = obj.event; //获得 lay-event 对应的值
	    if(layEvent === 'del'){
	      var id=data.fdPodId;
	    
	      layer.confirm('确认删除？', function(index){
	        obj.del(); //删除对应行（tr）的DOM结构
	        layer.close(index);
	        //使用jquery的ajax方式向后台提交数据
			var url = "../../FdPoBreakdown/delete.action";
			var data={fdPodId:id};
				$.post(url,data,function(data){
					
					if(data=="ok"){
						layer.msg('删除成功', {
							  icon: 1,
							  time: 1000 //1秒关闭（如果不配置，默认是3秒）
							}, function(){
							  
						});
						table.reload('testReload',{
        					page: {
        					    curr: 1 //重新从第 1 页开始
        					  }
        				});
					}
					
				});
	      	});
	    }
	  });
	//条件查询
	  var $ = layui.$;
			  
	  $('.demoTable .layui-btn').on('click', function(){
		 var drugName = $('#drugName');
		 var dtId = $('#dtId');
		 var drugBarCode = $('#drugBarCode');
		 var drugPinyin = $('#drugPinyin');
		 var priceMin = $('#priceMin');
		 var priceMax = $('#priceMax');
		 //执行重载
	     table.reload('testRe', {
	       page: {
	         curr: 1 //重新从第 1 页开始
	       }
	       ,where: {
	    	   drugName: drugName.val(),
	    	   dtId:dtId.val(),
	    	   drugBarCode:drugBarCode.val(),
	    	   drugPinyin:drugPinyin.val(),
	    	   priceMin:priceMin.val(),
	    	   priceMax:priceMax.val()
	       }
	     });
	  });
});
</script>
</body>
</html>